<template>
  <view class="complaint">
    <text class="complaint-text">请选择举报原因（多选）</text>
    <radio-group class="complaint-group" @change="handleCheckChange" v-for="item in options" :key="item.id">
      <radio class="complaint-group-radio" :value="item.value" :checked="selectedOptions.includes(item.value)">
        {{ item.name }}
      </radio>
    </radio-group>

    <button @click="handleSubmit" class="complaint-button" :disabled="!selectedOptions.length"
      type="primary">提交</button>
  </view>
</template>

<script lang="ts" setup>
import { ref } from 'vue'

const selectedOptions = ref<string[]>([])

// 举报选项数据
const options = ref([
  { id: 1, value: 'ad', name: '广告' },
  { id: 2, value: 'violence', name: '低俗色情' },
  { id: 3, value: 'porn', name: '谣言' },
  { id: 4, value: 'fraud', name: '诈骗' },
  { id: 5, value: 'privacy', name: '信息不真实' },
  { id: 6, value: 'copyright', name: '文章抄袭' },
  { id: 7, value: 'emotion', name: '影响情绪' },
])

// 赋值给 selectedOptions
const handleCheckChange = (e: any) => {
  selectedOptions.value = e.detail.value
}

// 点击提交按钮
const handleSubmit = () => {
  console.log('点击提交举报', selectedOptions.value)
  // 提交后清空选择
  selectedOptions.value = []
  // 显示提交成功提示
  uni.showToast({
    title: '反馈成功',  // 提示内容
    icon: 'success',    // 图标类型（success/loading/none）
    duration: 1500      // 显示时长（毫秒）
  })
  // 返回上一页
  uni.navigateBack()
}
</script>

<style scoped lang="scss">
.complaint {
  font-size: 30rpx;

  &-text {
    color: #9d9d9d;
  }

  &-group {
    margin-top: 50rpx;

    &-radio {
      color: #333333;
    }
  }

  &-button {
    margin-top: 80rpx;
  }
}
</style>